<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../js/vue.js"></script>
    <title>基本使用</title>
  </head>
  <!-- 
      Vue中使用组件的三大步骤
            1.创建组件
            2.注册组件
            3.编写组件标签（调用组件）
      
      一、如何定义一个组件？
            使用Vue.extend(options)创建，其中options配置喝new Vue(options)时候传入的配置几乎一样，但是又有一些区别如下
                    1.el不要写，为什么？——最终所有组件都要经过一个Vm的管理，由Vm中的el决定服务哪个容器
                    2.data必须写成函数，为什么？————避免组件被复用，对象数据存在引用关系
                备注：使用template可以配置组件结构
      二、如何注册组件？
                    1.局部组件：靠new Vue的时候传入components选项
                    2.全局注册：靠Vue.component('组件名'，组件)
      三、编写组件标签：
            <school></school>

   -->
  <body>
    <div id="root">
      <school></school>
      <studentcom></studentcom>
    </div>
    <div id="root2">
      <hello></hello>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false

    // 创建school组件
    const school = Vue.extend({
      //   el: '#root',//组件一定不要写el配置项，因为所有的组件都要被一个VM管理，由Vm决定服务于哪个容器
      data() {
        //组件里边data必须是一个函数，函数返回一个data对象，因为如果直接写data，会报错，
        // 分析一下为什么data不能直接写？因为data如果是一个对象那么就是引用形式，组件如果服用，data就会混乱，一个改了另外的也会更改
        // 所以函数就解决了这个问题
        return {
          name: '太原科技大学',
          address: '北京市昌平区',
        }
      },
      template: `
        <div>
            <h2>学校名称：{{name}}</h2>
            <h2>地址：{{address}}</h2>
        </div>
      `,
    })

    // 创建学生组件
    const student = Vue.extend({
      data() {
        return {
          name: '名师',
          age: 18,
        }
      },
      template: `
        <div>
            <h2>本人名称：{{name}}</h2>
            <h2>年龄：{{age}}</h2>
        </div>
      `,
    })

    // 创建hello组件
    const hello = Vue.extend({
      data() {
        return {
          name: 'fasdf',
          age: 18,
        }
      },
      template: `
        <div>
            <h2>本人名称：{{name}}</h2>
            <h2>年龄：{{age}}</h2>
        </div>
      `,
    })

    //全局注册组件
    Vue.component('hello', hello)

    // 创建Vm1
    new Vue({
      el: '#root',
      //局部注册组件
      components: {
        school, //js中简写，如果对象key喝value一样，school:school则直接可简写为一个school
        studentcom: student,
      },
    })

    // 创建Vm2
    new Vue({
      el: '#root2',
    })
  </script>
</html>
